<template>
  <div>
    <p>您输入的地址有误，请检查后重试！</p>
    <!-- 声明式导航/内置组件导航 -->
    <!-- tag="button" -->
    <router-link exact-active-class="live111" to="/">返回首页</router-link>
    <router-link exact-active-class="live111" to="/cart">购物车</router-link>
    <router-link exact-active-class="live111" to="/404">404</router-link>
    <router-link exact-active-class="live111" to="/list">list</router-link>
    <router-link exact-active-class="live111" to="/layout">嵌套路由</router-link>
    <hr />
    <!-- 编程式导航 -->
    <button @click="changePage('/')">返回首页</button>
    <button @click="changePage('/cart')">购物车</button>
  </div>
</template>

<script>
export default {
  created() {
    // 获取当前页面的路由信息--局部的路由对象
    console.log(this.$route);
    // 全局的实例对象
    console.log(this.$router);
  },
  methods: {
    // 复杂的代码完成复杂的功能
    changePage(url) {
      console.log(this.$router);
      // 这里可以添加一些逻辑
      if (true) {
        // 会向历史记录中push一条新的记录 放在最后
        // replace go
        this.$router.push(url);
      } else {
        // 不跳转或者跳到其他页面
      }
    },
  },
};
</script>

<style>
/* .router-link-exact-active {
    color: blue;
} */
.live111 {
  color: red;
}
</style>